<template>
	<view class="confirm-order">
		<view class="card content-box">
			<view class="community">重庆市南川区</view>
			<view class="address">{{community}}</view>
			<view class="name">{{name}}<text class="phone-number">{{phone}}</text></view>
		</view>
		<view class="card content-box">
			<view class="product-info">
				<image :src="detail.commodityDTOS[0].imageKey" mode="aspectFill" :draggable="false" />
				<view class="right">
					<view class="product-name">
						{{detail.commodityDTOS[0].name}}
						<view class="price">¥ {{detail.commodityDTOS[0].price}}</view>
					</view>
					<view class="numbox">x{{detail.commodityDTOS[0].quantity}}</view>
				</view>
			</view>
			<view class="order-info">
				<view class="order-item">
					<view class="label">订单编号</view>
					<view class="text">{{detail.outTradeNo}}</view>
				</view>
				<view class="order-item">
					<view class="label">实付款</view>
					<view class="text-price">{{detail.price}}</view>
				</view>
				<view class="order-item">
					<view class="label">配送方式</view>
					<view class="text">{{detail.deliveryType === '0' ? '自提' : '送货上门'}}</view>
				</view>
				<view class="order-item" v-if="detail.deliveryType === '1'">
					<view class="label">配送费</view>
					<view class="text">¥ 2</view>
				</view>
				<view class="order-item">
					<view class="label">提货码</view>
					<view class="text">{{detail.randomCode}}</view>
				</view>
				<view class="order-item">
					<view class="label">商家地址</view>
					<view class="text">{{detail.address}}</view>
				</view>
				<view class="order-item">
					<view class="label">下单时间</view>
					<view class="text">{{detail.createdTime}}</view>
				</view>
			</view>
		</view>
		
		<view class="fixed-bottom-box flex" v-if="detail.status === '0'">
			<button type="warn" @click="goPayment">去支付</button>
			<button type="warn" plain @click="closeOrder">关闭订单</button>
		</view>
		<view class="fixed-bottom-box" v-if="detail.status === '1'">
			<button type="warn" @click="refund">去退款</button>
		</view>
	</view>
</template>

<script>
	import { closeOrder, payment, refund } from '@/api/convenientServices'
	export default {
		data() {
			return {
				detail: {}
			}
		},
		computed: {
			name() {
				return this.$store.state.user.name
			},
			community() {
				return this.$store.state.user.community
			},
			phone() {
				return this.$store.state.user.phone
			}
		},
		methods: {
			closeOrder() {
				closeOrder({id: this.detail.id}).then(res => {
					uni.showToast({title: '关闭订单成功'})
					setTimeout(() => {
						uni.navigateBack({
						  success: () => {
						    let page = getCurrentPages().pop();//跳转页面成功之后
						    if (page) {
						   	  page.onLoad();//执行上个页面的方法
						    };
						  }
						})
					}, 1000)
				})
			},
			goPayment() {
				let that = this
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
					payment({code:loginRes.code,id: that.detail.id}).then(paymentRes => {
						uni.requestPayment({
							provider: 'wxpay',
							...paymentRes.data,
							success: function(res) {
								paymentResult({id: orderRes.data.id}).then(resultRes => {
									uni.showToast({title: '支付成功'})
									setTimeout(() => {
										uni.navigateBack({
										  success: () => {
										    let page = getCurrentPages().pop();//跳转页面成功之后
										    if (page) {
										   	  page.onLoad();//执行上个页面的方法
										    };
										  }
										})
									}, 1000)
								})
							},
							// 参数有问题则抛出错误
							fail: function(err) {
								uni.showToast({title: '支付失败'})
								// uni.navigateBack()
							},
						})
					})
				  }
				});
			},
			refund() {
				refund({id: this.detail.id}).then(res => {
					uni.showToast({title: '退款申请提交成功'})
					setTimeout(() => {
						uni.navigateBack({
						  success: () => {
						    let page = getCurrentPages().pop();//跳转页面成功之后
						    if (page) {
						   	  page.onLoad();//执行上个页面的方法
						    };
						  }
						})
					}, 1000)
				})
			}
		},
		onLoad(e) {
			this.detail = JSON.parse(decodeURIComponent(e.content))
		}
	}
</script>

<style lang="scss" scoped>
.confirm-order {
	.content-box {
		padding: 30rpx;
		.community {
			font-size: 22rpx;
			color: #888;
		}
		.address {
			font-size: 28rpx;
			font-weight: bold;
			margin-top: 15rpx;
		}
		.name {
			font-size: 26rpx;
			margin-top: 15rpx;
			.phone-number {
				color: #888;
				margin-left: 20rpx;
			}
		}
		.product-info {
			display: flex;
			justify-content: space-between;
			padding-bottom: 30rpx;
			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 16rpx;
				margin-right: 30rpx;
				flex-shrink: 0;
			}
			.rignt {
				width: 100%;
			}
			.product-name {
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;
				line-height: 1.4;
				.price {
					font-size: 26rpx;
					color: #FC0204;
					margin-left: 40rpx;
					flex-shrink: 0;
				}
			}
			.numbox {
				text-align: right;
				margin-top: 25rpx;
			}
		}
		.order-info {
			padding: 30rpx;
			border-top: 1px solid #E3E3E3;
			.order-item {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				margin-top: 40rpx;
				.label {
					color: #888;
					margin-right: 30rpx;
					flex-shrink: 0;
				}
				.text {
					line-height: 1.4;
				}
				.text-price {
					font-size: 30rpx;
					font-weight: bold;
					color: #FC0204;
				}
			}
		}
	}
}
</style>
